<template>
  <div>
    <h1>侦听器-副作用清理</h1>
    <div>
      <input :disabled="isDisabled" v-model="wenti" type="text" placeholder="请输入问题" />
      <p>问题的结果：{{ daan }}</p>
      <p style="padding: 10px; font-size: 33px">{{ num }}</p>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Study3StuDemo14'
}
</script>
<script setup lang="ts">
import { ref, watch } from 'vue'

import { debounce } from 'lodash'

// 定义接口响应的类型
interface ResData {
  /**
   * 返回的数据
   */
  data: any
  /**
   * 响应的信息
   */
  msg: string
  /**
   * 接口状态码
   * @description 4000:失败  200：代表请求成功  5000:代表服务器挂了
   */
  code: number | string
}

// 模拟后端请求数据
function fetchDataDemo() {
  return new Promise<ResData>((resolve, reject) => {
    setTimeout(() => {
      resolve({
        data: '你的问题我现在还没有学会,请过两天再问问我,这几天我正在疯狂的吃数据!',
        msg: 'ok',
        code: 200
      })
    }, 1000)
  })
}

// 问题
const wenti = ref('')
// 问题的答案
const daan = ref('')
// 是否禁用
const isDisabled = ref(false)

const num = ref(0)

watch(
  wenti,
  debounce((newVal, oldVal, onCleanup) => {
    const timeoutid = setInterval(() => {
      num.value++
    }, 1000)
    console.log('监听器被执行')

    onCleanup(() => {
      console.log('触发onCleanup')

      clearInterval(timeoutid)
    })
  }, 500)
)
</script>

<style></style>
